import React, { useRef, useState, useEffect } from 'react'
import "./Workbench.css"
import { Image, Space, Tabs, Button } from 'antd';
import sign1 from "../../icon/标识1.png"
import sign2 from "../../icon/标识2.png"
import sign3 from "../../icon/标识3.png"
import sign4 from "../../icon/标识4.png"
import maoJson from "../../map.json"
import * as echarts from 'echarts';
const gaugeData = [
  {
    value: 20,
    name: '边设备总数',
    title: {
      offsetCenter: ['0%', '-20%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '20%']
    }
  },

];

export default function Workbench() {
  const gaugeRef = useRef()
  const [gaugeChart, setGaugeChart] = useState(null)
  const gaugeRef1 = useRef()
  const [gaugeChart1, setGaugeChart1] = useState(null)
  const lineRef = useRef()
  const [lineChart, setLineChart] = useState(null)
  const lineRef1 = useRef()
  const [lineChart1, setLineChart1] = useState(null)
  const barRef = useRef()
  const [barChart, setBarChart] = useState(null)
  const barRef1 = useRef()
  const [barChart1, setBarChart1] = useState(null)
  const barRef2 = useRef()
  const [barChart2, setBarChart2] = useState(null)
  const barRef3 = useRef()
  const [barChart3, setBarChart3] = useState(null)
  const barRef4 = useRef()
  const [barChart4, setBarChart4] = useState(null)
  const barRef5 = useRef()
  const [barChart5, setBarChart5] = useState(null)
  const mapRef = useRef()
  const [mapChart, setMapChart] = useState(null)

  var cityData = [{ name: '闽清县', value: 96.55, }, { name: '闽侯县', value: 86.51, }, { name: '永泰县', value: 0, }, { name: '福清市', value: 92.86, },
  { name: '平潭县', value: 84.98, }, { name: '长乐区', value: 91.24, }, { name: '马尾区', value: 0, }, { name: '晋安区', value: 0, },
  { name: '鼓楼区', value: 0, }, { name: '台江区', value: 0, }, { name: '仓山区', value: 91.71, }, { name: '连江县', value: 92.48, }, { name: '罗源县', value: 100, }
  ]
  var items = [
    {
      key: '1',
      label: `已投运数`,
      children:
        <div ref={mapRef} style={{ height: '500px', width: "100%", textAlign: 'center', margin: "15px 0 0 0" }}>

        </div>
    },
    {
      key: '2',
      label: `已建档数`,
      children:
        "123",
    },
    {
      key: '3',
      label: `已调试数`,
      children:
        "123"
    },
    {
      key: '4',
      label: `已安装数`,
      children:
        "123"
    },
  ];
  var items1 = [
    {
      key: '1',
      label: `日趋势`,
      children:
        <div ref={lineRef1} style={{ height: "230px", width: "100%" }}></div >,
    },
    {
      key: '2',
      label: `月趋势`,
      children:
        "123"
    },

  ];
  const gauge = () => {
    var myChart
    if (!gaugeChart) {
      myChart = echarts.init(gaugeRef.current);
      setGaugeChart(myChart)
    } else {
      myChart = gaugeChart
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });

    myChart.setOption({
      series: [
        {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          data: gaugeData,
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#464646'
            }
          },
          axisLine: {
            lineStyle: {
              width: 8
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          title: {
            fontSize: 9
          },
          detail: {
            width: 30,
            height: 10,
            fontSize: 8,
            formatter: '{value}%'
          }
        }
      ]
    })
  }
  const gauge1 = () => {
    var myChart
    if (!gaugeChart1) {
      myChart = echarts.init(gaugeRef1.current);
      setGaugeChart1(myChart)
    } else {
      myChart = gaugeChart1
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });

    myChart.setOption({
      series: [
        {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          data: gaugeData,
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#464646'
            }
          },
          axisLine: {
            lineStyle: {
              width: 8
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          title: {
            fontSize: 9
          },
          detail: {
            width: 30,
            height: 10,
            fontSize: 8,
            formatter: '{value}%'
          }
        }
      ]
    })
  }
  const line = () => {
    var myChart
    if (!lineChart) {
      myChart = echarts.init(lineRef.current);
      setLineChart(myChart)
    } else {
      myChart = lineChart
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });

    myChart.setOption({

      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
        },
        valueFormatter: (value) => value + "%"
      },
      grid: {
        right: '5%',
        left: "13%",
        bottom: '15%',
        top: "5%"
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: { show: false },

        axisLabel: {
          fontSize: 8
        }
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 100,
        axisLabel: {
          //这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
          formatter: "{value} %",
          fontSize: 8
        },
        splitLine: {
          lineStyle: {
            type: 'dashed'//虚线
          },
          show: true //隐藏
        }
      },
      series: [
        {
          name: 'Roma运行情况:',
          type: 'line',
          showSymbol: false,
          data: [20, 45, 87, 76, 69, 50, 66],
          lineStyle: {
            color: "#1FBBA9"
          },
        },
        {
          name: '管理组件运行情况:',
          type: 'line',
          showSymbol: false,
          data: [46, 76, 35, 98, 65, 56, 34],
          lineStyle: {
            color: "#188df0"
          },
        }
      ]
    })
  }
  const line1 = () => {
    var myChart

    if (!lineChart1) {
      myChart = echarts.init(lineRef1.current);
      setLineChart1(myChart)
    } else {
      myChart = lineChart1
    }

    window.addEventListener('resize', function () {
      myChart.resize();
    });
    myChart.setOption({

      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
        },

      },
      grid: {
        right: '1%',
        left: "8%",
        bottom: '15%',
        top: "13%"
      },
      xAxis: {
        type: 'category',
        data: ['10', '11', '12', '13', '14', '15', '16', '17', '18', '19'],
        axisTick: { show: false },
        axisLabel: {
          fontSize: 8
        }
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 7000,
        name: "单位:条",
        nameTextStyle: {
          fontSize: 10
        },
        axisLabel: {
          //这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
          fontSize: 8
        },

      },
      series: [
        {
          name: 'Roma运行情况:',
          type: 'line',
          showSymbol: false,
          smooth: true,
          data: [6786, 5546, 6845, 5844, 6367, 6245, 5756, 6167, 6145, 5956],
          lineStyle: { // 线条样式
            normal: {
              width: 3,
              shadowColor: 'rgba(0,0,0,0.3)',
              shadowBlur: 5,
              shadowOffsetY: 5,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // 颜色渐变
                {
                  offset: 0,
                  color: '#188df0'
                },
                {
                  offset: 1,
                  color: '#1FBBA9'
                }
              ])
            }
          },

        }
      ]
    })
  }

  const bar = () => {
    var myChart
    if (!barChart) {
      myChart = echarts.init(barRef.current);
      setBarChart(myChart)
    } else {
      myChart = barChart
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });

    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
        },
      },
      grid: {
        right: '5%',
        bottom: '10%',
        top: "20%",
        left: "10%"
      },
      legend: {
        textStyle: {
          fontSize: 9
        },
        itemWidth: 18,
        itemHeight: 10,
        itemGap: 7,
        padding: 4
      },
      dataset: {
        source: [
          ['product', '温度告警', '设备离线', '开盖警告', '流量超限', '设备停电'],
          ['2023-04', 0, 178, 0, 0, 0],
          ['2023-05', 0, 178, 337, 0, 0],
          ['2023-06', 0, 265, 242, 0, 0],
        ]
      },
      xAxis: {
        type: 'category',
        axisLabel: {
          color: "#8b8b8b",
          fontSize: 10
        },
        axisTick: { show: false },
      },
      yAxis: {
        max: 350,
        min: 0,
        interval: 50,
        name: "单位:台",
        nameTextStyle: {
          fontSize: 10
        },
      },
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [
        {
          type: 'bar',
          barWidth: "20px",
          label: { //柱体上显示数值
            show: true,//开启显示
            position: 'top',//在上方显示
            textStyle: {//数值样式
              fontSize: '10px',
              color: '#666'
            },
          },
          itemStyle: {
            color: "gold"
          }
        }, {
          type: 'bar',
          barWidth: "20px",
          label: { //柱体上显示数值
            show: true,//开启显示
            position: 'top',//在上方显示
            textStyle: {//数值样式
              fontSize: '10px',
              color: '#666'
            },
          }
        }, {
          type: 'bar',
          barWidth: "20px",
          label: { //柱体上显示数值
            show: true,//开启显示
            position: 'top',//在上方显示
            textStyle: {//数值样式
              fontSize: '10px',
              color: '#666'
            },
          }
        }, {
          type: 'bar',
          barWidth: "20px",
          label: { //柱体上显示数值
            show: true,//开启显示
            position: 'top',//在上方显示
            textStyle: {//数值样式
              fontSize: '10px',
              color: '#666'
            },
          }
        }, {
          type: 'bar',
          barWidth: "20px",
          label: { //柱体上显示数值
            show: true,//开启显示
            position: 'top',//在上方显示
            textStyle: {//数值样式
              fontSize: '10px',
              color: '#666'
            },
          }
        }]
    })
  }
  const bar1 = () => {
    var myChart
    if (!barChart1) {
      myChart = echarts.init(barRef1.current);
      setBarChart1(myChart)
    } else {
      myChart = barChart1
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });

    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
        },
      },
      grid: {
        right: '5%',
        bottom: '10%',
        top: "13%",
        left: "8%"
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
          color: "#8b8b8b",
          fontSize: 10
        },
        axisTick: { show: false },
      },
      yAxis: {
        max: 1,
        min: 0,
        interval: 0.2,
        name: "单位:台",
        nameTextStyle: {
          fontSize: 10
        },

      },
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [
        {
          type: 'bar',
          data: [0.2, 0.2, 0.2, 0.2, 0.2, 0.2, 0.2],
          barWidth: "20px",
          label: { //柱体上显示数值
            show: true,//开启显示
            position: 'top',//在上方显示
            textStyle: {//数值样式
              fontSize: '10px',
              color: '#666'
            },
          }
        }]
    })
  }
  const bar2 = () => {
    var myChart
    if (!barChart2) {
      myChart = echarts.init(barRef2.current);
      setBarChart2(myChart)
    } else {
      myChart = barChart2
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });

    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
        },
        valueFormatter: (value) => value + "%"
      },
      grid: {
        right: '5%',
        bottom: '10%',
        top: "5%",
        left: "8%"
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Sun'],
        axisLabel: {
          color: "#8b8b8b",
          fontSize: 10
        },
        axisTick: { show: false },
      },
      yAxis: {
        max: 100,
        min: 0,
        interval: 20,
        axisLabel: {
          //这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
          formatter: "{value} %",
        },
      },
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [
        {
          type: 'bar',
          data: [20, 40, 60, 80, 40, 60, 80, 20, 40, 60, 80, 40, 60, 80, 90],
          barWidth: "20px",
          label: { //柱体上显示数值
            show: true,//开启显示
            position: 'top',//在上方显示
            textStyle: {//数值样式
              fontSize: '10px',
              color: '#666'
            },
          },
          itemStyle: {
            borderRadius: [3, 3, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#188df0' },

              { offset: 0.7, color: '#7856f3' }
            ])
          },
        }]
    })
  }
  const bar3 = () => {
    var myChart
    if (!barChart3) {
      myChart = echarts.init(barRef3.current);
      setBarChart3(myChart)
    } else {
      myChart = barChart3
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });

    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
        },
      },
      grid: {
        right: '5%',
        bottom: '10%',
        top: "10%",
        left: "15%"
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        axisLabel: {
          color: "#8b8b8b",
          fontSize: 10
        },
        axisTick: { show: false },
      },
      yAxis: {
        max: 7000,
        min: 0,
        interval: 1000,
        name: "单位张",
        nameTextStyle: {
          fontSize: 10
        },
      },
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [
        {
          type: 'bar',
          data: [2000, 4000, 6000, 5600, 4000, 6000],
          barWidth: "20px",
          label: { //柱体上显示数值
            show: true,//开启显示
            position: 'top',//在上方显示
            textStyle: {//数值样式
              fontSize: '10px',
              color: '#666'
            },
          },
          itemStyle: {
            borderRadius: [3, 3, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#188df0' },

              { offset: 0.7, color: '#7856f3' }
            ])
          },
        }]
    })
  }
  const bar4 = () => {
    var myChart
    if (!barChart4) {
      myChart = echarts.init(barRef4.current);
      setBarChart4(myChart)
    } else {
      myChart = barChart4
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });

    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
        },

      },
      grid: {
        right: '5%',
        bottom: '10%',
        top: "10%",
        left: "15%"
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu'],
        axisLabel: {
          color: "#8b8b8b",
          fontSize: 10
        },
        axisTick: { show: false },
      },
      yAxis: {
        max: 7000,
        min: 0,
        interval: 1000,
        name: "单位次",
        nameTextStyle: {
          fontSize: 10
        },
      },
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [
        {
          type: 'bar',
          data: [2000, 4000, 6000, 6100],
          barWidth: "20px",
          label: { //柱体上显示数值
            show: true,//开启显示
            position: 'top',//在上方显示
            textStyle: {//数值样式
              fontSize: '10px',
              color: '#666'
            },
          },
          itemStyle: {
            borderRadius: [3, 3, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#188df0' },

              { offset: 0.7, color: '#7856f3' }
            ])
          },
        }]
    })
  }
  const bar5 = () => {
    var myChart
    if (!barChart5) {
      myChart = echarts.init(barRef5.current);
      setBarChart5(myChart)
    } else {
      myChart = barChart5
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });

    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
        },
        valueFormatter: (value) => value + "%"
      },
      grid: {
        right: '5%',
        bottom: '10%',
        top: "10%",
        left: "15%"
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
          color: "#8b8b8b",
          fontSize: 10
        },
        axisTick: { show: false },
      },
      yAxis: {
        max: 1,
        min: 0,
        interval: 0.2,
        name: "单位%",
        nameTextStyle: {
          fontSize: 10
        },
        axisLabel: {
          //这种做法就是在y轴的数据的值旁边拼接单位，貌似也挺方便的
          formatter: "{value} %",
        },
      },
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [
        {
          type: 'bar',
          data: [0, 0, 0, 0, 0, 0, 0],
          barWidth: "20px",
          label: { //柱体上显示数值
            show: true,//开启显示
            position: 'top',//在上方显示
            textStyle: {//数值样式
              fontSize: '10px',
              color: '#666'
            },
          },
          itemStyle: {
            borderRadius: [3, 3, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#188df0' },

              { offset: 0.7, color: '#7856f3' }
            ])
          },
        }]
    })
  }
  const fzMap = () => {
    var myChart
    if (!mapChart) {
      myChart = echarts.init(mapRef.current);
      setMapChart(myChart)
    } else {
      myChart = mapChart
    }
    window.addEventListener('resize', function () {
      myChart.resize();
    });
    var name = 'jiangxi' //地图名是jiangxi
    var data = maoJson  //地图的数据来自之前引入的json文件
    echarts.registerMap(name, data)

    myChart.setOption({
      backgroundColor: '#fff',
      visualMap: {
        show: false,
        //设置最大值和最小值
        type: "piecewise",
        min: 0,
        max: 100,
        itemWidth: "12px",
        itemHeight: "12px",
        left: "10%",
        textStyle: {
          opacity: 0.6,
          fontSize: 12
        },
        calculable: true,
        seriesIndex: [0], //作用在哪个series上
        inRange: {
          color: ['#27b0de'],

        }
      },
      tooltip: {
        show: true,
        valueFormatter: (value) => value + "台"
      },
      series: [
        {
          name: "物联体系建设应用率",
          type: 'map',
          map: name,
          roam: true,
          geoIndex: 1,
          zoom: 2,  //地图的比例
          data: cityData,
          aspectScale: "1",
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#000000'  //字体颜色
              },
              formatter: function (params) {
                return [`{a|${params.name}}\n{b|${params.value}台}`]
              },
              rich: {
                a: {
                  color: 'white',
                  lineHeight: 20
                },
                b: {
                  color: '#11dcf0',
                  fontSize: 13,
                  fontWeight: "bold",
                },
              },
            },

          },

          itemStyle: {
            normal: {
              areaColor: '#EEEEEE',
              borderColor: 'white',
              borderType: "dashed"
            },
            emphasis: {
              areaColor: '#cee9f3',
            }
          },
        },
      ]
    });
  }
  useEffect(() => {
    setTimeout(function () {
      gauge()
      gauge1()
      line()
      bar()
      line1()
      bar1()
      bar2()
      bar3()
      bar4()
      bar5()
      fzMap()
    }, 500)
  }, [])
  const changeTabs = (cur) => {
    setTimeout(function () {

      line1()

    }, 500)
  }

  return (
    <div>
      {/* 第一部分 设备运营 */}
      <div>
        <div className="title">
          设备运营概览
        </div>
        <div style={{ display: 'flex', margin: "15px 0 0 0" }}>
          <div style={{
            flex: '1 1 100px', margin: "0 10px 0 0", display: 'flex', flexDirection: "column",
            width: "30%", minWidth: "30%", maxWidth: "30%"
          }}>
            <div style={{ height: "300px", borderRadius: "10px", padding: "10px 5px", background: "white", }}>
              <div>管辖地市设备建设概览（福州市）</div>
              <div style={{ display: 'flex', flexDirection: "column", alignItems: "center", }}>
                <Image src={sign2} style={{ width: "100%", margin: "20px 0" }}></Image>
              </div>
              <div style={{ display: 'flex', flexDirection: "column", alignItems: "center", color: "#1FBBA9" }}>
                <div style={{ display: 'flex', width: "350px", alignItems: "center", }}>
                  <div style={{ width: "119px", display: 'flex' }}>
                    <Image src={sign1} style={{ height: "120px" }}></Image>
                    <Space direction="vertical" size={8} >
                      <div style={{ padding: " 5px 0 0 5px", fontSize: '11px' }}>ROMA在线情况</div>
                      <div style={{ fontSize: "9px" }}>边设备总数:<span style={{ color: "orange", }}>1083台</span></div>
                      <div style={{ fontSize: "9px" }}>边设备总数:<span style={{ color: "orange", }}>1083台</span></div>
                      <div style={{ fontSize: "9px" }}>边设备总数:<span style={{ color: "orange", }}>1083台</span></div>
                      <div style={{ fontSize: "9px" }}>边设备总数:<span style={{ color: "orange", }}>1083台</span></div>
                    </Space>

                  </div>
                  <div style={{ width: "110px", display: 'flex' }}>
                    <Image src={sign1} style={{ height: "120px" }}></Image>
                    <Space direction="vertical" size={8} >
                      <div style={{ padding: " 5px 0 0 5px", fontSize: '11px' }}>建设情况</div>
                      <div style={{ fontSize: "9px" }}>边设备总数:<span style={{ color: "orange", }}>1083台</span></div>
                      <div style={{ fontSize: "9px" }}>边设备总数:<span style={{ color: "orange", }}>1083台</span></div>
                      <div style={{ fontSize: "9px" }}>边设备总数:<span style={{ color: "orange", }}>1083台</span></div>
                    </Space>

                  </div>
                  <div style={{ width: "119px", display: 'flex' }}>
                    <Image src={sign1} style={{ height: "120px" }}></Image>
                    <Space direction="vertical" size={8} >
                      <div style={{ padding: " 5px 0 0 5px", fontSize: '11px' }}>管理组件在线情况</div>
                      <div style={{ fontSize: "9px" }}>边设备总数:<span style={{ color: "orange", }}>1083台</span></div>
                      <div style={{ fontSize: "9px" }}>边设备总数:<span style={{ color: "orange", }}>1083台</span></div>
                      <div style={{ fontSize: "9px" }}>边设备总数:<span style={{ color: "orange", }}>1083台</span></div>
                      <div style={{ fontSize: "9px" }}>边设备总数:<span style={{ color: "orange", }}>1083台</span></div>
                    </Space>

                  </div>
                </div>
              </div>

            </div>
            <div style={{ height: "300px", margin: "15px 0 0 0", padding: "10px", background: "white", borderRadius: "10px" }}>
              <div>管辖地市设备投运情况概览（福州市）</div>
              <div style={{ display: "flex", margin: "15px 0 0 0", }}>
                <div style={{ width: "90px" }}>
                  <div ref={gaugeRef} style={{ height: "120px", width: "90px", lineHeight: "120px" }}>
                  </div>
                  <div ref={gaugeRef1} style={{ height: "120px", width: "90px", lineHeight: "120px" }}>
                  </div>
                </div>
                <div style={{ flex: "1 1 270px", borderRadius: "5px", border: "1px solid #e7e7e7", padding: "5px 8px", boxShadow: "3px 3px 4px 0px rgba(0,0,0,0.2)" }}>
                  <div style={{ height: '45%', display: 'flex' }}>
                    <div style={{ flex: "1 1 100px" }}>
                      <div>Roma运行情况</div>
                      <Space style={{ fontSize: '10px', color: "gray" }} direction="vertical" size={5}>
                        <div>在线率0%</div>
                        <div>离线数0台</div>
                        <div>在线率0台</div>
                        <div>运行率90%</div>
                      </Space>

                    </div>
                    <div style={{ flex: "1 1 100px" }}>
                      <div>管理组件运行情况</div>
                      <Space style={{ fontSize: '10px', color: "gray" }} direction="vertical" size={5}>
                        <div>在线率0%</div>
                        <div>离线数0台</div>
                        <div>在线率0台</div>
                        <div>运行率90%</div>
                      </Space>
                    </div>
                  </div>
                  <div style={{ height: '55%', width: "100%" }}>
                    <div ref={lineRef} style={{ height: '95%', width: "100%" }}>

                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div style={{
            flex: '1 1 150px', margin: "0 10px 0 0", background: "white", borderRadius: "10px",
            width: "38%", minWidth: "38%", maxWidth: "4381%"
          }}>
            <div style={{ padding: "10px 0 0 10px" }}>管辖地市设备建设运营概览（福州市）</div>
            <Tabs defaultActiveKey="1" items={items}
              style={{ fontSize: "10px" }}
              className='tabs'
            />
          </div>
          <div style={{ flex: '1 1 100px', width: "30%", minWidth: "30%", maxWidth: "30%" }}>
            <div style={{ height: "300px", borderRadius: "10px", padding: "10px 5px", background: "white", }}>
              <div>设备告警情况</div>
              <Tabs defaultActiveKey="1" onChange={(cur) => changeTabs(cur)} items={items1}
                style={{ fontSize: "10px", height: "265px", padding: "5px" }}
                className='tabs'
                tabBarStyle={{ padding: "0 10px" }}
              />
            </div>
            <div style={{ height: "300px", margin: "15px 0 0 0", padding: "10px 5px", background: "white", borderRadius: "10px" }}>
              <div style={{ padding: "0 0 5px 0" }}>告警情况分类</div>
              <div ref={barRef} style={{ height: "90%", width: "100%" }}></div >
            </div>
          </div>
        </div>
      </div>
      {/* 第二部分 APP运营 */}
      <div style={{ margin: "15px 0" }}>
        <div className="title">
          APP运营概览
        </div>
        <div style={{ display: 'flex', margin: "15px 0 0 0" }}>
          <div style={{ flex: '1 1 100px', display: 'flex', flexDirection: "column", }}>
            <div style={{ height: "400px", padding: "10px 20px 10px 10px", background: "white", borderRadius: "10px" }}>
              <div>APP运行情况概览（福州市）</div>
              <div style={{ display: "flex", margin: "15px 0 0 0", }}>
                <div style={{ width: "150px" }}>
                  <div style={{ height: "120px", textAlign: "center", padding: "0 10px" }}>
                    <div style={{
                      width: "120px", height: "120px", borderRadius: "50%", background: "#00bebe",
                      display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "5px 5px 10px #888888"
                    }}>
                      <div style={{
                        width: "80px", height: "80px", borderRadius: "50%", background: "white",
                        border: '3px solid black', display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column",
                      }}>
                        <div style={{ height: '18px', fontSize: '12px', fontWeight: "bold" }}>设备总数</div>
                        <div style={{ color: "#f56585", fontWeight: "bold" }}>0</div>
                      </div>

                    </div>

                  </div>

                  <div style={{ height: "120px", textAlign: "center", padding: "0 10px", margin: "80px 0 0 0" }}>
                    <div style={{
                      width: "120px", height: "120px", borderRadius: "50%", background: "#ec808d",
                      display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "5px 5px 10px #888888"
                    }}>
                      <div style={{
                        width: "80px", height: "80px", borderRadius: "50%", background: "white",
                        border: '3px solid black', display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column",
                      }}>
                        <div style={{ height: '18px', fontSize: '12px', fontWeight: "bold" }}>正常运行数</div>
                        <div style={{ color: "#f56585", fontWeight: "bold" }}>0</div>
                      </div>

                    </div>
                  </div>
                </div>
                <div style={{ flex: "1 1 300px", borderRadius: "5px", border: "1px solid #e7e7e7", padding: "5px 8px", }}>
                  <div ref={barRef1} style={{ height: "300px", width: "100%" }}>

                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style={{ flex: '1 1 100px', background: "white", margin: "0 0 0 10px", borderRadius: "10px" }}>
            <div style={{ padding: "10px 0 0 10px" }}>APP覆盖率概览（福州市）</div>
            <div style={{ display: "flex", margin: "15px 5px", }}>
              <div style={{ flex: "1 1 300px", padding: "5px 8px", }}>
                <div ref={barRef2} style={{ height: "300px", width: "100%" }}>

                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
      {/* 第二部分 物联卡运营 */}
      <div style={{ margin: "15px 0" }}>
        <div className="title">
          物联卡运营概览
        </div>
        <div style={{ display: 'flex', margin: "15px 0 0 0" }}>
          <div style={{ flex: '1 1 100px', display: 'flex', flexDirection: "column", }}>
            <div style={{ height: "350px", padding: "10px 20px 10px 10px", background: "white", borderRadius: "10px" }}>
              <div>物联卡运行概览（福州市）</div>
              <div style={{ display: "flex", margin: "15px 0 0 0", }}>
                <div style={{ width: "150px", padding: "0 10px 0 0" }}>
                  <div style={{ height: "120px", textAlign: "center", padding: "0 10px" }}>
                    <div style={{
                      width: "120px", height: "120px", borderRadius: "50%", background: "#00bebe",
                      display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "5px 5px 10px #888888"
                    }}>
                      <div style={{
                        width: "80px", height: "80px", borderRadius: "50%", background: "white",
                        border: '3px solid black', display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column",
                      }}>
                        <div style={{ height: '18px', fontSize: '12px', fontWeight: "bold" }}>设备总数</div>
                        <div style={{ color: "#f56585", fontWeight: "bold" }}>0</div>
                      </div>

                    </div>
                  </div>
                  <div style={{
                    height: '30px', textAlign: 'center', background: "linear-gradient(to right, #1FBBA9, #7856f3)",
                    lineHeight: "30px", fontSize: '12px', borderRadius: '5px', color: 'white', margin: "10px 0 0 0"
                  }}>卡正常数：4564</div>
                  <div style={{ height: "120px", textAlign: "center", margin: "10px 0 0 0", padding: "0 10px" }}>
                    <div style={{
                      width: "120px", height: "120px", borderRadius: "50%", background: "#ec808d",
                      display: "flex", alignItems: "center", justifyContent: "center", boxShadow: "5px 5px 10px #888888"
                    }}>
                      <div style={{
                        width: "80px", height: "80px", borderRadius: "50%", background: "white",
                        border: '3px solid black', display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column",
                      }}>
                        <div style={{ height: '18px', fontSize: '12px', fontWeight: "bold" }}>正常运行数</div>
                        <div style={{ color: "#f56585", fontWeight: "bold" }}>0</div>
                      </div>

                    </div>
                  </div>
                </div>
                <div style={{ flex: "1 1 300px", borderRadius: "5px", height: "280px", border: "1px solid #e7e7e7", margin: " 0 15px 0 0", boxShadow: "3px 3px 4px 0px rgba(0,0,0,0.2)" }}>
                  <div style={{ fontSize: '14px', textAlign: 'center', height: "20px", lineHeight: "40px", fontWeight: 'bold' }}>异常物联网卡数情况</div>
                  <div ref={barRef3} style={{ height: "250px", width: "100%" }}>

                  </div>
                </div>
                <div style={{ flex: "1 1 300px", borderRadius: "5px", height: "280px", border: "1px solid #e7e7e7", margin: " 0 15px 0 0", boxShadow: "3px 3px 4px 0px rgba(0,0,0,0.2)" }}>
                  <div style={{ fontSize: '14px', textAlign: 'center', height: "20px", lineHeight: "40px", fontWeight: 'bold' }}>异常出现次数情况</div>
                  <div ref={barRef4} style={{ height: "250px", width: "100%" }}>

                  </div>
                </div>
                <div style={{ flex: "1 1 300px", borderRadius: "5px", height: "280px", border: "1px solid #e7e7e7", margin: " 0 15px 0 0", boxShadow: "3px 3px 4px 0px rgba(0,0,0,0.2)" }}>
                  <div style={{ fontSize: '14px', textAlign: 'center', height: "20px", lineHeight: "40px", fontWeight: 'bold' }}>物联网异常率</div>
                  <div ref={barRef5} style={{ height: "250px", width: "100%" }}>

                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
